<template>
	<view class="bgw search-box">
		<view class="flex">
			<view class="btn-add" @click="nav('/materialEdit/materialEdit?from='+page)" v-if="isShowAddBtn && add">
				+
				创建食材
			</view>
			<view class="flex-1">
				<u-search :clearabled="true" shape="square" placeholder="输入食材关键字" v-model="keyword" :showAction="true"
					bgColor="#ffffff" @change="searchChange" @search="search" @custom="search" @clear="searchClear"></u-search>
			</view>
			<view class="" v-if="loading">
				<u-loading-icon size="16"></u-loading-icon>
			</view>
			<view class="btn-volume" @click="recorder" v-if="isRecorder">
				<u-icon name="volume"></u-icon>
			</view>
		</view>
		<view class="search-result bgw" v-if="resultList.length > 0">
			<u-line></u-line>
			<view class="blank20"></view>
			<view class="wrapper bgw font-24">
				搜索结果
			</view>
			<view class="blank10 bgw"></view>
			<view class="bgw" style="position: relative">
				<!-- <u-icon name="close" class="close-btn"></u-icon> -->
				<view class="flex flex-wrap tag-wrapper">
					<template v-for="(v,i) in resultList">

						<template v-if="namekey == 'material_id'">
							<view class="tag-item" v-if="i<30" @click="choose(v,v.material_id[1])">
								{{v.material_id[1]}}
							</view>
						</template>
						<template v-else>
							<view class="tag-item" v-if="i<30" @click="choose(v,v[namekey])">
								{{v[namekey]}}
							</view>
						</template>


					</template>
				</view>
			</view>
			<view class="blank20 bgw"></view>
			<u-line></u-line>
		</view>
	</view>
</template>

<script>
	export default {
		name: "search",
		props: {
			data: Array,
			namekey: {
				type: String,
				default: 'material_id'
			},
			add:{
				type: Boolean,
				default: true
			},
			page:{
				type: String,
				default: 'food'
			}
		},
		data() {
			return {
				keyword: '',
				resultList: [],
				is_material_alias_name_list: false, //是否搜别名
				loading: false,
				isShowAddBtn:false
			};
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					if (newVal.length == 0) {
						return;
					}
					if (newVal[0].is_material_alias_name_list) {
						this.is_material_alias_name_list = true;
					} else {
						this.is_material_alias_name_list = false;
					}
				},
				immediate: false,
				deep: true
			},
		},
		computed:{
			isRecorder(){
				let arr = ['food','warehousingFood','stockOutFood'];
				return arr.includes(this.page);
			}
		},
		created() {
			try{
				let role = this.$store.getters.get_role;
				// console.log(role);
				this.isShowAddBtn = role['采购模块'].is_edit_material;
			}catch(e){
				
			}
		},
		methods: {
			startRecorderManager(){
				
			},
			searchClear() {
				// console.log('11');
				// this.keyword = '';
			},
			// 搜索
			searchChange() {
				if (!this.keyword) {
					this.resultList = [];
					return;
				}
			},
			search() {
				if (!this.keyword) {
					this.resultList = [];
					this.loading = false;
					return;
				}
				this.loading = true;
				setTimeout(() => {
					// console.log(this.keyword);
					let material_item = JSON.parse(JSON.stringify(this.data));
					let resultList = [];
					resultList = material_item.filter(v => this.getName(v) == this.keyword);
					let resultId = resultList.map(v => v.id);

					if (this.is_material_alias_name_list) {
						material_item = material_item.filter(v => !resultId.includes(v.id));
						resultList = resultList.concat(material_item.filter(v => v.material_alias_name_list.includes(this
							.keyword)));
						resultId = resultList.map(v => v.id);
					}

					material_item = material_item.filter(v => !resultId.includes(v.id));
					resultList = resultList.concat(material_item.filter(v => this.getName(v).includes(this.keyword)));
					if (resultList.length == 0) {
						console.log(resultList);
						if (this.namekey == 'material_id') {
							this.resultList = [{
								material_id: [0, '暂无搜索结果。']
							}];
						} else {
							let item = {};
							item[this.namekey] = '暂无搜索结果';
							this.resultList = [item];
						}
					} else {
						this.resultList = resultList;
					}
					setTimeout(() => {
						this.loading = false;
					}, 500)
				}, 0)
			},
			recorder(){
				this.$emit("recorder");
			},
			getName(v) {
				if (this.namekey == 'material_id') {
					return v.material_id[1];
				} else {
					return v[this.namekey]
				}
			},
			choose(v, name) {
				this.keyword = name;
				if (this.namekey == 'material_id') {
					if (!v.material_id[0]) return;
					this.$emit("choose", v.material_id[0]);
				} else {
					if (!v.id) return;
					this.$emit("choose", v.id);
				}
				this.resultList = [];
			},
		},
	}
</script>

<style lang="scss" scoped>
	.search-box {
		position: relative;
	}

	.search-result {
		z-index: 999;
		position: absolute;
		top: 32px;
		left: 0;
		right: 0;
	}

	.tag-wrapper {
		padding: 0 25upx;
	}

	.tag-item {
		margin: 10upx;
	}

	.tag-item {
		padding-left: 15upx;
		padding-right: 15upx;
		border: 1px solid #a9a9a9;
		border-radius: 8upx;
	}

	.btn-add {
		text-align: center;
		background-color: #675f91;
		color: #ffffff;
		padding: 2px 5px;
		border-radius: 4px;
		// margin-right: 10px;
		margin-left: 10px;
		font-size: 12px;
	}
	.btn-volume{
		text-align: center;
		background-color: #ffffff;
		color: #999999;
		padding: 8px;
		// border-radius: 4px;
		// border: 1px solid #999999;
		font-size: 12px;
	}
</style>